<template>
	<view class="d-flex flex-column" style="height: 100%;">
		<!-- 选项卡 -->
		<view class="d-flex bg-white a-center j-center font-md text-muted border-top border-bottom border-light-secondary">
			<view class="flex-1 d-flex a-center j-center py-2"
			v-for="(item, index) in tabBars" :key="index"
			:class="tabIndex === index ? 'tabactive' : ''"
			@tap="changeTab(index)">
				{{item.name}}
			</view>
		</view>
		<!-- 列表 -->
		<scroll-view scroll-y="true" class="flex-1" style="background-color: #F5F5F5;">
			<block v-for="(tab, tabI) in tabBars" :key="tabI">
				<view class="position-relative" v-show="tabI === tabIndex">
					<template v-if="!tab.list || tab.list.length < 1">
						<view class="position-relative border"
						style="height: 400rpx;">
							<no-thing :icon="getNoThingByStatusCode(tab.statusCode).no_thing" :msg="getNoThingByStatusCode(tab.statusCode).msg"></no-thing>
						</view>
					</template>
					<template v-else>
						<view class="p-3">
							<block v-for="(item, index) in tab.list" :key="index">
								<coupon :item="item" :index="index" ></coupon>
							</block>
						</view>
					</template>
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	import noThing from "@/components/common/no-thing.vue"
	import coupon from "@/components/order-coupon/coupon.vue"
	
	let statusNoThingMap = {
		"noAvailable": {
			no_thing: "no_pay.png",
			"msg": "没有可用的优惠券"
		},
		"disable": {
			no_thing: "no_pay.png",
			"msg": "没有已失效的优惠券"
		}
	}
	
	export default {
		
		components:{
			noThing,
			coupon,
		},
		
		data() {
			return {
				tabIndex: 0,
				
				tabBars: [
					{
						name: "可用", 
						id:0, 
						no_thing:"no_pay.png",
						statusCode: "noAvailable",
						list: [
							{
								title: "手机立减1000元",
								start_time: "2020-10-01",
								end_time: "2020-12-31",
								price: "1000",
								desc: "满3000使用",
								status: true,
								disable: false
							},
							{
								title: "手机立减1000元",
								start_time: "2020-10-01",
								end_time: "2020-12-31",
								price: "1000",
								desc: "满3000使用",
								status: true,
								disable: true
							}
						],
					},
					{
						name: "已失效", 
						id:0, 
						no_thing:"no_pay.png",
						statusCode: "disable",
						list: [
							{
								title: "手机立减1000元",
								start_time: "2020-10-01",
								end_time: "2020-12-31",
								price: "1000",
								desc: "满3000使用",
								status: false,
								disable: false
							},
							{
								title: "手机立减1000元",
								start_time: "2020-10-01",
								end_time: "2020-12-31",
								price: "1000",
								desc: "满3000使用",
								status: false,
								disable: false
							}
						],
					}
				],
			}
		},
		methods: {
			getNoThingByStatusCode(statusCode) {
				if (statusCode in statusNoThingMap) {
					return statusNoThingMap[statusCode]
				}
			},
			
			changeTab(index) {
				this.tabIndex = index
			},
			
		}
	}
</script>

<style>
.tabactive {
	border-bottom: 5rpx solid #FD6801;
	color: #FD6801;
	/* margin-bottom: -5rpx; */
}
</style>
